<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="#(ctx)/assets/thirdparty/swiper/swiper.min.css">
<link rel="stylesheet" href="#(ctx)/assets/thirdparty/swiper/animate.min.css">
<script src="#(ctx)/assets/thirdparty/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
</head>
<style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    
    /* music */
	#wraper_music {
        position: fixed;
        width: 50px;
        height: 50px;
        top: 10px;
        right: 10px;
        z-index: 999;
        border-radius: 50px;
        display: block;
    }

    #btn_play_music {
        width: 50px;
        height: 60px;
        cursor: pointer;
        background-size: 50px 50px;
        filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;
    }

    .c_btn_play_music_playing {
/*         background: url(#(ctx)/assets/imgs/front/swiper/music_playing.png) no-repeat; */
/*         -webkit-animation: kf_music_playing 8s linear infinite; */
/*         animation: kf_music_playing 8s linear infinite; */
        
        background:url() no-repeat;
        -webkit-animation: kf_music_playing 5s linear both infinite;
    	animation: kf_music_playing 5s linear both infinite;
    }

    .c_btn_play_music_paused {
        background: url(#(ctx)/assets/imgs/front/swiper/music_stop.png) no-repeat;
    }
    
    @keyframes kf_music_playing {
        0% {
            -webkit-transform: rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateZ(1turn); <!-- 360deg  1turn -->
        }
    }

    @-webkit-keyframes kf_music_playing {
        0% {
            -webkit-transform: rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateZ(1turn);
        }
    }
    
    /* 向上滑动提示 */
    #up-tip{
    	width:20px;height:15px;left: 50%;margin-left: -10px;
    	position: absolute;
        z-index: 999;
        animation: tipmove 1.5s infinite ease-in-out;
        -webkit-animation: tipmove 1.5s infinite ease-in-out;
    }
    @keyframes tipmove {
        0% {
            bottom: 10px;
            opacity: 0
        }
        50% {
            bottom: 15px;
            opacity: 1
        }
        100% {
            bottom: 20px;
            opacity: 0
        }
    }

    @-webkit-keyframes tipmove {
        0% {
            bottom: 10px;
            opacity: 0
        }
        50% {
            bottom: 15px;
            opacity: 1
        }
        100% {
            bottom: 20px;
            opacity: 0
        }
    }
    
</style>
<body>
<!-- 导航等组件可以放在container之外  -->
<!-- music -->
<div id="wraper_music">
    <div id="btn_play_music" class="c_btn_play_music_playing"></div>
</div>

<!-- 向上滑动提示 -->
<img src="#(ctx)/assets/imgs/front/swiper/web-swipe-tip.png" id="up-tip">



<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
        
			<div style="width:100%;height:100%;display:block;">
			
				<div style="transform:rotate(0deg);text-align: left;position: absolute;top: 15%;left: 28.75%;">
					<div style="animation: rotateInDownLeft 0.6s linear 0s 1 both, rotateOutUpRight 1s linear 0.6s 1 forwards;">
						<div class="ele-heart">     	
							<svg viewBox="0 0 70 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" preserveAspectRatio="none meet" style="position: absolute; width: 100%; height: 100%; opacity: 1;">
							    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
							    <title>shape07</title>
							    <desc>Created with Sketch.</desc>
							    <defs></defs>
							    <g id="Page-1" stroke="none" stroke-width="1" fill="undefined" fill-rule="evenodd" sketch:type="MSPage">
							        <path class="color1-fill" d="M50.3092488,65.0845338 C44.2862424,65.0845338 38.6860741,62.0631099 35,57.0808279 C31.3160994,62.0643018 25.7170531,65.0845338 19.6907514,65.0845338 C8.83332666,65.0845338 0,55.4269848 0,43.5551974 C0,36.4728172 3.16374872,31.5044871 5.70694697,27.5125899 C13.0982352,15.9175297 31.6823583,1.48782077 32.4696322,0.879469567 C33.2279501,0.293273384 34.1144309,0 34.9989484,0 C35.8854991,0 36.7707878,0.293273384 37.5282646,0.879469567 C38.3163799,1.48782077 56.9016247,15.9175297 64.2908096,27.5125899 C66.8351996,31.5045572 70,36.4728874 70,43.5551974 C69.9999301,55.4269848 61.1666034,65.0845338 50.3092488,65.0845338 L50.3092488,65.0845338 L50.3092488,65.0845338 Z" id="shape07" fill="#ba0505" sketch:type="MSShapeGroup" transform="translate(35.000000, 32.542267) scale(1, -1) translate(-35.000000, -32.542267) "></path>
							    </g>
							</svg>
						</div> 
					</div>
				</div>
				
				<div style="transform:rotate(90deg);text-align: left;position: absolute;top: 32.5792%;left: 54%;">
					<div style="animation: rotateInDownLeft 0.6s linear 0s 1 both, rotateOutUpRight 1s linear 0.6s 1 forwards;">
						<div class="ele-heart-l" >
							<svg viewBox="0 0 70 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" preserveAspectRatio="none meet" style="position: absolute; width: 100%; height: 100%; opacity: 1;">
							    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
							    <title>shape07</title>
							    <desc>Created with Sketch.</desc>
							    <defs></defs>
							    <g id="Page-1" stroke="none" stroke-width="1" fill="undefined" fill-rule="evenodd" sketch:type="MSPage">
							        <path class="color1-fill" d="M50.3092488,65.0845338 C44.2862424,65.0845338 38.6860741,62.0631099 35,57.0808279 C31.3160994,62.0643018 25.7170531,65.0845338 19.6907514,65.0845338 C8.83332666,65.0845338 0,55.4269848 0,43.5551974 C0,36.4728172 3.16374872,31.5044871 5.70694697,27.5125899 C13.0982352,15.9175297 31.6823583,1.48782077 32.4696322,0.879469567 C33.2279501,0.293273384 34.1144309,0 34.9989484,0 C35.8854991,0 36.7707878,0.293273384 37.5282646,0.879469567 C38.3163799,1.48782077 56.9016247,15.9175297 64.2908096,27.5125899 C66.8351996,31.5045572 70,36.4728874 70,43.5551974 C69.9999301,55.4269848 61.1666034,65.0845338 50.3092488,65.0845338 L50.3092488,65.0845338 L50.3092488,65.0845338 Z" id="shape07" fill="#ba0505" sketch:type="MSShapeGroup" transform="translate(35.000000, 32.542267) scale(1, -1) translate(-35.000000, -32.542267) "></path>
							    </g>
							</svg>
						</div>
					</div>
				</div>
				
				<div style="transform:rotate(180deg);text-align: left;position: absolute;top: 49.278%;left: 28.75%;">
					<div style="animation: rotateInDownLeft 0.6s linear 0s 1 both, rotateOutUpRight 1s linear 0.6s 1 forwards;">
						<div class="ele-heart" >
							<svg viewBox="0 0 70 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" preserveAspectRatio="none meet" style="position: absolute; width: 100%; height: 100%; opacity: 1;">
							    Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch
							    <title>shape07</title>
							    <desc>Created with Sketch.</desc>
							    <defs></defs>
							    <g id="Page-1" stroke="none" stroke-width="1" fill="undefined" fill-rule="evenodd" sketch:type="MSPage">
							        <path class="color1-fill" d="M50.3092488,65.0845338 C44.2862424,65.0845338 38.6860741,62.0631099 35,57.0808279 C31.3160994,62.0643018 25.7170531,65.0845338 19.6907514,65.0845338 C8.83332666,65.0845338 0,55.4269848 0,43.5551974 C0,36.4728172 3.16374872,31.5044871 5.70694697,27.5125899 C13.0982352,15.9175297 31.6823583,1.48782077 32.4696322,0.879469567 C33.2279501,0.293273384 34.1144309,0 34.9989484,0 C35.8854991,0 36.7707878,0.293273384 37.5282646,0.879469567 C38.3163799,1.48782077 56.9016247,15.9175297 64.2908096,27.5125899 C66.8351996,31.5045572 70,36.4728874 70,43.5551974 C69.9999301,55.4269848 61.1666034,65.0845338 50.3092488,65.0845338 L50.3092488,65.0845338 L50.3092488,65.0845338 Z" id="shape07" fill="#ba0505" sketch:type="MSShapeGroup" transform="translate(35.000000, 32.542267) scale(1, -1) translate(-35.000000, -32.542267) "></path>
							    </g>
							</svg>
						</div>
					</div>
				</div>
				
				<div style="transform:rotate(270deg);text-align: left;position: absolute;top: 32.5792%;left: 1.8457%;">
					<div style="animation: rotateInDownLeft 0.6s linear 0s 1 both, rotateOutUpRight 1s linear 0.6s 1 forwards;"> 			
						<div class="ele-heart-l">
							<svg viewBox="0 0 70 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" preserveAspectRatio="none meet" style="position: absolute; width: 100%; height: 100%; opacity: 1;">
							    Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch
							    <title>shape07</title>
							    <desc>Created with Sketch.</desc>
							    <defs></defs>
							    <g id="Page-1" stroke="none" stroke-width="1" fill="undefined" fill-rule="evenodd" sketch:type="MSPage">
							        <path class="color1-fill" d="M50.3092488,65.0845338 C44.2862424,65.0845338 38.6860741,62.0631099 35,57.0808279 C31.3160994,62.0643018 25.7170531,65.0845338 19.6907514,65.0845338 C8.83332666,65.0845338 0,55.4269848 0,43.5551974 C0,36.4728172 3.16374872,31.5044871 5.70694697,27.5125899 C13.0982352,15.9175297 31.6823583,1.48782077 32.4696322,0.879469567 C33.2279501,0.293273384 34.1144309,0 34.9989484,0 C35.8854991,0 36.7707878,0.293273384 37.5282646,0.879469567 C38.3163799,1.48782077 56.9016247,15.9175297 64.2908096,27.5125899 C66.8351996,31.5045572 70,36.4728874 70,43.5551974 C69.9999301,55.4269848 61.1666034,65.0845338 50.3092488,65.0845338 L50.3092488,65.0845338 L50.3092488,65.0845338 Z" id="shape07" fill="#ba0505" sketch:type="MSShapeGroup" transform="translate(35.000000, 32.542267) scale(1, -1) translate(-35.000000, -32.542267) "></path>
							    </g>
							</svg>
						</div>	
					</div>	
				</div> 	
				
				<div style="position:absolute;top:0;left:0;width:100%;height:100%;">
					<div style="animation: bounceIn 1s linear 1.3s 1 both;">
	        			<img width="100%" height="100%" src="#(ctx)/assets/imgs/front/me/1.jpg">
	        		</div>		
        		</div>
        		
        		<div style="position:absolute;bottom:60px;text-align:center;width:100%;
        			color:#133a77;font-size:15px;line-height:30px;">
	        		<div style="animation: bounceInDown 1s linear 3s 1 both;">
	        				对于世界，你可能是一个人，<br/>但对于我，你却是整个世界。
	        		</div>
        		</div>
        		
        		<!-- 散发星星 -->
        		<div style="position:absolute;bottom:60px;width:100%;height:100%;">
	        		<div style="animation: zoomIn 1s linear 2s 1 both;">
        				<img alt="" src="#(ctx)/assets/imgs/front/swiper/elements/2.gif">
        			</div>
        		</div>
        		<!-- 闪亮的星星 -->
        		<div style="position:absolute;bottom:50%;width:100%;z-index:11;">
	        		<div style="animation: zoomIn 1s linear 2s 1 both;">
	        			<img alt="" src="#(ctx)/assets/imgs/front/swiper/elements/1.png" style="margin-left:30px;">
	        		</div>
        		</div>
			</div>				
        </div>
        <div class="swiper-slide">
        
  			<div style="width:100%;height:100%;display:block;">
  			
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="65%" style="stroke: none;fill:red"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="66%" style="stroke: none;fill:#black"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="67%" style="stroke: none;fill:#fff"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:50%;left:0;width:100%;height:100%;font-size:30px;margin-top:-15px;">
  					<div style="width:100%;height:100%;text-align:center;" 
  						class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
						准备好了吗
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="65%" style="stroke: none;fill:red"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:50%;left:0;width:100%;height:100%;font-size:30px;margin-top:-15px;">
  					<div style="width:100%;height:100%;text-align:center;color:#fff;" 
  						class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">
						不要眨眼
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="66%" style="stroke: none;fill:red"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:50%;left:0;width:100%;height:100%;font-size:30px;margin-top:-15px;">
  					<div style="width:100%;height:100%;text-align:center;color:#fff;" 
  						class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.8s">
						3
					</div>
  				</div>
  				
  				
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.2s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="67%" style="stroke: none;fill:#fff"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:50%;left:0;width:100%;height:100%;font-size:60px;margin-top:-30px;">
  					<div style="width:100%;height:100%;text-align:center;" 
  						class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.4s">
						2
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.8s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="68%" style="stroke: none;fill:red"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:50%;left:0;width:100%;height:100%;font-size:100px;margin-top:-50px;">
  					<div style="width:100%;height:100%;text-align:center;color:#fff;" 
  						class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="3s">
						1
					</div>
  				</div>
  				
  				<div style="text-align:left;position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:100%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="3.4s">
						<svg xmlns="http://www.w3.org/2000/svg"
						    xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">
						 
						    <circle cx="50%" cy="50%" r="69%" style="stroke: none;fill:#fff"/>
						 
						</svg>
					</div>
  				</div>
  				
  				<div style="position:absolute;top:0;left:0;width:100%;height:100%;">
  					<div style="width:100%;height:50%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="3.6s">
  						<img alt="" src="#(ctx)/assets/imgs/front/me/2.jpg" style="width:100%;height:auto;"/>
  					</div>
  					<div style="width:100%;height:5%;text-align:center;line-height:5%;" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="4s">
  						我喜欢的样子,你都有。
  					</div>
  					<div style="width:100%;height:45%;display:flex;flex-direction: row;justify-content:space-between;align-items:center;" class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="4.4s">
  						<div style="width:30%;height:100%;">
  							<img alt="" src="#(ctx)/assets/imgs/front/me/3.jpg" style="width:100%;height:auto;"/>
  						</div>
  						<div style="width:30%;height:100%;padding-top:60px;">
  							<img alt="" src="#(ctx)/assets/imgs/front/me/4.jpg" style="width:100%;height:auto;"/>
  						</div>
  						<div style="width:30%;height:100%;padding-top:120px;">
  							<img alt="" src="#(ctx)/assets/imgs/front/me/5.jpg" style="width:100%;height:auto;"/>
  						</div>
  					</div>
  				
  				</div>
  				
  				
  				
        	</div>
        </div>
        <div class="swiper-slide">
      		
      		
        </div>
    </div>
    <!-- 如果需要分页器 -->
<!--     <div class="swiper-pagination"></div> -->
    
    <!-- 如果需要导航按钮 -->
<!--     <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    
    <!-- 如果需要滚动条 -->
<!--     <div class="swiper-scrollbar"></div> -->
</div>

<script src="#(ctx)/assets/thirdparty/swiper/preloadjs.min.js"></script>
<script src="#(ctx)/assets/thirdparty/swiper/soundjs.min.js"></script>
<script src="#(ctx)/assets/thirdparty/swiper/swiper.min.js"></script>
<script src="#(ctx)/assets/thirdparty/swiper/swiper.animate.min.js"></script>
<script>


//---------start播放器代码---------
function Player(el, src) {
  this.el = el;
  this.isPlay = true;
  if (src == undefined) {
      src = '';
  }
  this.init(src);
}
Player.prototype = {
  init: function(src) {
      var _this = this,
          attr = {
              loop: true,
              preload: "auto",
              autoplay: true,
              src: src
          };

      this._audio = new Audio;
      for (var i in attr) {
          attr.hasOwnProperty(i) && i in this._audio && (this._audio[i] = attr[i]);
      }

      this.inited = false;
      $(this._audio).on('durationchange', function() {
          // 播放加载
          if (_this._audio.duration > 1) {
              _this.inited = true;
          }
      });

      $(this._audio).on('ended', function() {
          // 播放结束
          _this._audio.currentTime = 0;
          _this.isPlay = false;
          _this._play();
      });

      if (src != '') {
          this._audio.load();
      }

      if (typeof this.el !== 'string') {
          this.el.on('click', function() {
              _this._play();
          });
      }
  },

  _load: function() {
      this._audio.load();
  },

  _src: function(src) {
      this._audio['src'] = src;
  },

  _isplay: function() {
      return this.isPlay;
  },

  _play: function() {
      if (!this.isPlay) {
          this._audio.play();
          if (typeof this.el !== 'string') {
              this.el.removeClass('c_btn_play_music_paused');
              this.el.addClass('c_btn_play_music_playing');
          }
      } else {
          this._audio.pause();
          if (typeof this.el !== 'string') {
              this.el.removeClass('c_btn_play_music_playing');
              this.el.addClass('c_btn_play_music_paused');
          }
      }
      this.isPlay = !this.isPlay;
  },

  _playOn: function() {
      this._audio.play();
      if (typeof this.el !== 'string') {
          this.el.removeClass('c_btn_play_music_paused');
          this.el.addClass('c_btn_play_music_playing');
      }
      this.isPlay = true;
  },

  _playOff: function() {
      this._audio.pause();
      if (typeof this.el !== 'string') {
          this.el.removeClass('c_btn_play_music_playing');
          this.el.addClass('c_btn_play_music_paused');
      }
      this.isPlay = false;
  },

  _volume: function(num) {
      this._audio.volume = num;
  }
}
//---------end播放器代码---------


//建议使用资源清单，方便管理，如果资源较多，可以考虑独立出json文件，脚本自动生成。
var manifest = [{
    id: '告白气球',
    src: '#(ctx)/assets/audio/gaobaiqiqiu.m4a'
}, {
    id: '一生有你',
    src: '#(ctx)/assets/audio/yishengyouni.m4a'
}, ];
var music_player;
// preloadJs可以方便的帮助我们预先加载相关资源，例如图片，文件，音频，数据等
var queue = new createjs.LoadQueue();
// SoundJS默认用的是复杂的Web Audio接口，这会导致加载音频变慢，所以显示注册使用html的audio即可
createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
// 如果需要加载音频，需要注册SoundJs插件
queue.installPlugin(createjs.Sound);
// 当队列完成全部加载后触发 
queue.on("complete", function() {
    //createjs.Sound.play("告白气球");
    music_player = new Player($('#btn_play_music'), "#(ctx)/assets/audio/bgmusic1.mp3");
}, this);
// 整个队列变化时展示的进度
queue.on("progress", function(event) {
    console.log("Progress:", queue.progress, event.progress);
});
// 设置并列加载，否则每次只加载一个，太耗时
queue.setMaxConnections(5);
queue.maintainScriptOrder = true;
queue.loadManifest(manifest);// 加载多个文件使用

// 初始化Swiper
$(document).ready(function () {
	var mySwiper = new Swiper ('.swiper-container', {
		direction: 'vertical', // 垂直切换选项
		loop: false, // 循环模式选项
		    
		    // 如果需要分页器
// 		    pagination: {
// 		      el: '.swiper-pagination',
// 		    },
		    
		    // 如果需要前进后退按钮
// 		    navigation: {
// 		      nextEl: '.swiper-button-next',
// 		      prevEl: '.swiper-button-prev',
// 		    },
		    
		    // 如果需要滚动条
// 		    scrollbar: {
// 		      el: '.swiper-scrollbar',
// 		    },
	    on:{
	      init: function(){
	        swiperAnimateCache(this); //隐藏动画元素 
	        swiperAnimate(this); //初始化完成开始动画
	        $(".ele-heart").width($(window).width() * 0.4);
	        $(".ele-heart-l").height($(window).width() * 0.4);
	        
	        $(".ele-heart").height($(window).width() * 0.4 / 1.06579122364); 
	        $(".ele-heart-l").width($(window).width() * 0.4 / 1.06579122364);
//             music_player._playOn();      
//          music_player._playOff();
	      }, 
	      slideChangeTransitionEnd: function(){ 
	        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
	        //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名


	      },
	      //窗口缩放时设置width
	      resize: function(){
	    	  
	      }
	    }
	});
})


</script>
</body>
</html>